<template>
	<view class="index" v-if="pageLoad">
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key) in showTypes" :key="key"  @click="goTo(item)">
				<view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">
					<image class="uni-media-list-logo" :src="item.imgUrl"></image>
					<view class="uni-media-list-body" >
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key2) in ranks" :key="key2" @click="goTo(item)">
				<view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">

					<image class="uni-media-list-logo" :src="item.imgUrl"></image>
					<view class="uni-media-list-body" >
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key3) in plays" :key="key3" @click="goTo(item)">
				<view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">
					<image class="uni-media-list-logo" :src="item.imgUrl"></image>
					<view class="uni-media-list-body" >
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key4) in others" :key="key4" @click="goTo(item)">
				<view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">

					<image class="uni-media-list-logo" :src="item.imgUrl"></image>
					<view class="uni-media-list-body" >
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
	
	</view>
	
</template>

<script>
	import title from "../../components/title.vue"
	import {All} from '../../api/cms/category';
	
	export default {
		components:{
			title
		},
		data() {
			return {
				titleText: "发现",
				statusColor: "#7C4BF9",
				showLeftButton: false,
				pageLoad: false,
				showTypes: [
					
				],
				ranks:[
					{
						text:'魅力榜单',	
						imgUrl: '../../static/image/found/charm.png',
						navigatePage: 'rank/index',
						navigateValue: 0
					},
					{
						text:'贡献榜单',	
						imgUrl: '../../static/image/found/contribute.png',
						navigatePage: 'rank/index',
						navigateValue: 1
					},
				],
				plays: [
					{
						text:'来一发',	
						imgUrl: '../../static/image/found/vertical.png',
						navigatePage: 'pose',
						navigateValue: 0
					},
					{
						text:'每日签到',	
						imgUrl: '../../static/image/found/signature.png',
						navigatePage: 'sign',
						navigateValue: 0
					}
				],
				others: [
					{
						text:'积分规则',	
						imgUrl: '../../static/image/found/jifen.png',
						navigatePage: 'rule',
						navigateValue: 0
					},
					{
						text:'安全购物',	
						imgUrl: '../../static/image/found/security.png',
						navigatePage: 'buy',
						navigateValue: 0
					},
					{
						text:'玩转社区',	
						imgUrl: '../../static/image/found/play.png',
						navigatePage: 'play',
						navigateValue: 0
					}
				],
			}
		},
		onLoad: function () {
			this.loadShowTypes();
			
		},
		methods: {
			loadShowTypes: function(){
				var that = this;
				All().then(function(res){

					for(var i =0; i < res.length; i++){
						console.log(JSON.stringify(res[i]))
						that.showTypes.push({
							text: res[i].typeName,
							imgUrl: '../../static/image/found/'+res[i].showTypeId+'.png',
							navigatePage: '../cms/nmodule',
							navigateValue: res[i].showTypeId
							
						});
						
						that.pageLoad = true;
					}
					
				});
			},
			goTo: function(e){
				uni.navigateTo({
					url: e.navigatePage+"?navigateValue=" + e.navigateValue
				})
			}
		}
	}
</script>

<style>
	
	.index {
		display: flex;
		flex: 1;
		flex-direction: column;
		height: 100%;
		width: 750upx;
	}

	.index-bd {
		
		width: 750upx;
		height: 100%;
	}
	.uni-list {
		width: 710upx !important;
		margin: 20upx;
		border-radius: 15upx;
	}
	
	.uni-media-list-logo {
		width: 50upx !important;
		height: 50upx !important;
	}
	
	.uni-media-list-body {
		height: 36upx;
		line-height: 36upx;
		font-size: 28upx !important;
		justify-content: space-around;
	}
	
	.uni-media-list-text-top {
		height: 50upx !important;
	}

	/* .uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	} */
</style>
